<template>
    <div ref="card">
        <h1>{{title}}</h1>
        <p>{{state}}</p>
        <span></span>
    </div>
</template>

<script>
    export default {
        props:['title','state','image'],
        name: "CourseCard",
        mounted() {
            this.$refs.card.style.background=`url(${this.image}) no-repeat`
            this.$refs.card.style.backgroundSize=`100%`
        }
    }
</script>

<style lang="stylus" scoped>
    div
        width 3.5rem
        cursor pointer
        padding 0.2rem 0 0.15rem 0.2rem
        margin-top 0.08rem
        height 1rem
        position relative
        border-radius 7%

        h1
            color #ffffff
            font-size 0.2rem
        p
            color #cccccc
            margin-top 0.05rem
            font-size 0.12rem
        span
            position absolute
            width 0.4rem
            height 0.4rem
            background-color #FD785A
            border-radius 50%
            top 0.24rem
            right 0.65rem
            box-shadow: 0 2px 15px rgba(0,0,0,.15);
            &::after
                content ""
                position absolute
                border-top 0.09rem solid transparent
                border-left 0.135rem solid white
                border-bottom 0.09rem solid transparent
                width 0
                height 0
                top 0.105rem
                right 0.1rem
</style>